<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<style>
    h3 {
        margin: 0;
        padding: 0;
    }
    .add {
        width: 100vw;
        height: 100vh;
        background: #f8f8f8;
        display: flex;
        justify-content: center;
        padding-top: 30px;
    }

    .add_wrap {
        width: 480px;
        height: 460px;
        padding: 20px;
        border-radius: 5px;
        background: #fff;
    }

    .add_wrap h3 {
        padding-left: 10px;
        font-weight: normal;
    }

    .item label {
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }

    .item {
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
    }

    .item label::after {
        position: absolute;
        top: 4px;
        left: 3px;
        width: 3px;
        height: 14px;
        background: cornflowerblue;
        content: " ";
    }

    .item input {
        border: 1px solid #888;
        height: 30px;
        border-radius: 2px;
        width: 90%;
    }

    .btn_wrap{
        width: 100%;
        padding:20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add button {
        border: none;
        color: #fff;
        height: 35px;
        background: cornflowerblue;
        line-height: 35px;
        width: 30%;
        border-radius: 4px;
    }

    .add button:disabled{
        background-color: #888888;
    }

    .gender {
        display: flex;
    }


</style>

<body>
<div id="add" class="add">
    <div class="add_wrap">
        <h3>+ 添加学生</h3>
        <p class="item">
            <label>学号</label>
            <input name="id" placeholder="请输入学号" v-model="id" @blur="checkNumb" />
            <span style="color:red">{{checkMsg}}</span>
        </p>

        <p class="item">
            <label>姓名</label>
            <input  name="name" type="text"  v-model="name" />
        </p>

        <p class="item">
            <label>性别</label>
            <section class="gender">
                <input  name="sex" type="radio" value="男" checked="true" v-model="sex" />男
                <input  name="sex" type="radio" value="女" v-model="sex" />女
            </section>
        </p>

        <p class="item">
            <label>生日</label>
            <input  type="date" name="user_date" v-model="birth" />
        </p>
        <p class="btn_wrap">
            <button  :disabled="bis" @click="add">提 交</button>
        </p>
    </div>
</div>

</body>

</body>
    <script>
        new Vue({
            el : "#add",
            data : {
                id : "",
                name : "",
                sex : "",
                birth : "",
                checkMsg : "",
                bis : false,
                isBack : false,
            },
            methods : {
                add(){
                    var t = this;
                    //提交事件函数
                    if(t.id != null && t.id != ''){//学号不能为空提交
                        axios.post("/student_manage/add",{"id":t.id,"name":t.name,"sex":t.sex,"birth":t.birth})
                            .then(function (response) {
                                //弹出登陆是否成功的信息
                                alert(response.data.msg);
                                //刷新页面，将已填写的值清空
                                window.location.href="/student_manage/add_student.html";
                            },function (error) {

                            })
                    } else {
                        alert("学号不能为空");
                    }


                },
                // 判断学号是否为空或者为数字之外的字符
                checkNumb(){
                    this.checkMsg = "";
                    this.bis = false;
                    var reg = new RegExp("^[1-9]\\d*$");
                    //如果非法，给出提示，并且把提交按钮禁用
                    if (!reg.test(this.id)) {
                        this.checkMsg = "学号只能为正整数！";
                        this.bis = "disabled";
                    }


                }
            }
        })
    </script>
</html>